<div class="card">
    <div class="card-block">
        <h5 class="card-title">用户模块列表</h5>
    </div>
    <div class="card-block" id="user_module_list">
        <table class="table table-striped table-hover table-sm" style="word-break:break-all; word-wrap:break-word;">
            <thead>
            <tr>
                <th>模块名称</th>
                <th>模块简介</th>
                <th class="hidden-sm-down">版本</th>
                <th>安装状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {#list<tr>
            <td>{name}</td>
            <td>{intro}</td>
            <td class="hidden-sm-down">{version}</td>
            <td>{installed}</td>
            <td><a href="javascript:;" onclick="module_install('{name}')" style="display:{display_add}"><i class="fa fa-plus-circle fa-lg" /></a><a href="javascript:;" onclick="module_remove('{name}')" style="display:{display_remove}"><i class="fa fa-remove fa-lg" /></a></td>
            </tr>#}
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade confirm" id="confirm_modal_module_install" tabindex="-1" role="dialog" aria-labelledby="confirm_modal_module_install_title" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirm_modal_module_install_title">模块安装</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                此操作此安装模块<br />如果此系统内有此模块数据，重新安装将会保留这些数据<br />如想清除模块所有数据，请安装后执行一次卸载操作并且不要保留数据。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" id="btn_install">开始安装</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade confirm" id="confirm_modal_module_remove" tabindex="-1" role="dialog" aria-labelledby="confirm_modal_module_remove_title" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirm_modal_module_remove_title">模块卸载警告</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                卸载后保留插件数据
                <div class="pull-right">
                    <input type="checkbox" name="retain_data" data-on-text="保留" data-off-text="清除">
                </div>
                <br /><br /><b class="text-danger">此操作无法取消，确定要操作吗？</b>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="btn_remove">开始卸载</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var temporary_modal = "";
    var temporary_retain_data = true;

    $(document).ready(function () {
        $("input[name='retain_data']").bootstrapSwitch({
            state: true,
            onColor: "success",
            offColor: "danger",
            onSwitchChange: function (event, state) {
                temporary_retain_data = state;
            }
        });

        $("#btn_remove").bind("click", function(){
            $("#btn_remove").attr("disabled", true);
            module_remove_handle();
        });
        $("#btn_install").bind("click", function () {
            $("#btn_install").attr("disabled", true);
            module_install_handle();
        });
    });

    function module_install(name) {
        temporary_modal = name;
        $("#confirm_modal_module_install").modal({focus: true, keyboard: true, backdrop: true});
    }

    function module_remove(name) {
        temporary_modal = name;
        $("#confirm_modal_module_remove").modal({focus: true, keyboard: true, backdrop: true});
    }

    function module_install_handle() {
        $.ajax({
            url: "?m=modules&a=install",
            type: "POST",
            data: { code: "{tamperproof_verify_code}", name: temporary_modal },
            dataType: "json",
            error: function(xhr,textStatus){
                alert(textStatus);
                $('#confirm_modal_module_install').modal('hide')
            },
            success: function (data,textStatus,jqXHR) {
                if(data.msg.length > 0) alert(data.msg);
                $('#confirm_modal_module_install').modal('hide')
                if(data.status != "error") {
                    setTimeout(function () {
                        _refresh_page();
                    }, 800);
                }
            }
        });
    }

    function module_remove_handle() {
        $.ajax({
            url: "?m=modules&a=remove",
            type: "POST",
            data: { code: "{tamperproof_verify_code}", name: temporary_modal, retain_data: temporary_retain_data },
            dataType: "json",
            error: function(xhr,textStatus){
                alert(textStatus);
                $('#confirm_modal_module_remove').modal('hide')
            },
            success: function (data,textStatus,jqXHR) {
                if(data.msg.length > 0) alert(data.msg);
                $('#confirm_modal_module_remove').modal('hide')
                if(data.status != "error") {
                    setTimeout(function () {
                        _refresh_page();
                    }, 800);
                }
            }
        });
    }
</script>